<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'

const state = reactive({
	dialogTitle: '',
	express: '',
	applySend: 12,
	doneSend: 69,
	returnGoods: 54,
	residue: 874,
	sendMethods: [
		{label: '自送', value: 1},
		{label: '快递', value: 2},
	],
	expressCompany: [
		{label: '顺丰', value: 1},
		{label: '百事', value: 2},
		{label: '京东', value: 3},
		{label: '圆通', value: 4},
		{label: '德邦', value: 5},
		{label: '中通', value: 6},
		{label: '圆通', value: 7},
		{label: '申通', value: 8},
	],
	sendPeple: '',
	phone: '',
	remark: '',
	methods: 1,
    tableData: [
		{
			id: 1, 
			name: '测试',
			six: '女',
			spec: '规格',
			phone: '15502336548',
			level: '2',
			totalPrice: '2562',
			consumePrice: '256',
			registerTime: '2023-02-25 12:12:36',
			staff: '1554562312',
			consumeStore: '雁塔店',
			buyTime: '2023-02-25 12:12:36',
			warranty: '',
			warrantyList: [
				{label: '保质期：2025-08-26 | 库存：100', value: '1'}
			],
			count: 1
		}
	] as Array<any>,
    rowId: 0
})
const innerVisible = ref(false)

const props = withDefaults(defineProps<{
    id: number,
    modelValue: boolean,
    statistics: number
	status: number
}>(), {
    statistics: 1,
	title: '',
	status: 1
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const previewInfo = (row: any) => {
    state.rowId = row.id 
	innerVisible.value = true
	state.dialogTitle = row.name || ''
}


</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" :title="`${props.status === 1 ? '进货信息' : '发货信息'}`" @close="closeDialog" style="width: 1300px;">
            <section v-if="props.status === 1">
				<el-table :data="state.tableData" style="width: 100%" class="mb20" border> 
					<el-table-column label="品牌" prop="cellPrice" />
					<el-table-column label="类型" prop="cellPrice" />
					<el-table-column label="商品名称" prop="orderPrice" />
					<el-table-column label="规格" prop="buyCount" />
					<el-table-column label="条形码" prop="buyCount"  />
					<el-table-column label="进货数量" prop="totalPrice"  />
					
				</el-table>
				<section style="text-align: center;">
					<el-button @click="closeDialog">关闭</el-button>
				</section>
			</section>
			<section v-if="props.status === 2">
				<el-table :data="state.tableData" style="width: 100%" border> 
					<el-table-column label="品牌" prop="cellPrice" />
					<el-table-column label="类型" prop="cellPrice" />
					<el-table-column label="商品名称" prop="orderPrice" />
					<el-table-column label="规格" prop="buyCount" />
					<el-table-column label="条形码" prop="buyCount"  />
					<el-table-column label="进货数量" prop="buyCount"  />
					<el-table-column label="选择保质号" prop="buyCount" width="200">
						<template #default="scope">
							<el-select v-model="scope.row.warranty" placeholder="请选择保质号" class="w100"  >
								<el-option v-for="item in scope.row.warrantyList" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</template>
					</el-table-column> 

					<el-table-column label="选择发货数量" prop="buyCount" width="200">
						<template #default="scope">
							<el-input-number v-model="scope.row.count" :min="1"  :max="10" />
						</template>
					</el-table-column> 
				</el-table>
				<section style="margin-top: 20px;">
					<el-row :gutter="35">
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8"  >
							<el-form-item label="配送方式">
								<el-select v-model="state.methods" placeholder="请选择进货门店" class="w100"  >
									<el-option v-for="item in state.sendMethods" :key="item.value"
										:label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20" v-show="state.methods == 2">
							<el-form-item label="选择快递公司">
								<el-select v-model="state.express" placeholder="选择快递公司" class="w100"  >
									<el-option v-for="item in state.expressCompany" :key="item.value"
										:label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20" v-show="state.methods == 2">
							<el-form-item label="快递单号">
								<el-input v-model="state.sendPeple" placeholder="请输入快递单号" clearable  ></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20" v-show="state.methods == 1">
							<el-form-item label="送货人">
								<el-input v-model="state.sendPeple" placeholder="请输入送货人" clearable  ></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20" v-show="state.methods == 1">
							<el-form-item label="手机号">
								<el-input v-model="state.phone" placeholder="请输入送货人手机号" clearable  ></el-input>
							</el-form-item>
						</el-col>
						
					</el-row>
					<el-row :gutter="35">
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
							<el-form-item label="备注">
								<el-input type="textarea" maxlength="100" v-model="state.remark" placeholder="请输入备注"  ></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="35">
						<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="mb20">
							<el-form-item label="申请发货：">
								<span>{{ state.applySend }} 件</span>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="mb20">
							<el-form-item label="已发货：">
								<span>{{ state.doneSend }} 件</span>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="mb20">
							<el-form-item label="已退货：">
								<span>{{ state.returnGoods }} 件</span>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="mb20">
							<el-form-item label="剩余欠货：">
								<span>{{ state.residue }} 件</span>
							</el-form-item>
						</el-col>
					</el-row>
				</section>
				<section style="text-align: center;">
					<el-button @click="closeDialog">取消</el-button>
					<el-button type="primary">发货</el-button>
				</section>
			</section>

            <!-- <section class="mt15" v-if="props.status === 1">
				<el-row justify="end">
					<el-col :span="24" class="flex-end-center">
						<el-pagination
						v-model:current-page="pageNation.pageNum"
						v-model:page-size="pageNation.pageSize"
						:page-sizes="[10, 20, 30]"  
						:background="true"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pageNation.total"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						/>
					</el-col>
				</el-row> 
			</section> -->
        </el-dialog>
		<InnerDialog :id="state.rowId" v-model="innerVisible" :title="state.dialogTitle" />
    </main>
</template>

<style lang='scss' scoped>

</style>